<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI服务测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4>AI服务诊断测试</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5>测试步骤：</h5>
                        <ol>
                            <li>点击下面的"测试AI服务"按钮</li>
                            <li>查看测试结果</li>
                            <li>根据结果进行相应的配置调整</li>
                        </ol>
                    </div>
                    
                    <div class="text-center mb-3">
                        <button id="testBtn" class="btn btn-primary">测试AI服务</button>
                    </div>
                    
                    <div id="testResult" class="mt-3" style="display: none;">
                        <h5>测试结果：</h5>
                        <div id="resultContent"></div>
                    </div>
                    
                    <div class="mt-4">
                        <h5>常见问题解决方案：</h5>
                        <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                                        API密钥问题
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>如果测试显示API密钥配置错误：</p>
                                        <ol>
                                            <li>访问 <a href="https://platform.deepseek.com/" target="_blank">DeepSeek平台</a> 获取有效的API密钥</li>
                                            <li>在 <code>application.yml</code> 文件中更新 <code>deepseek.api.api-key</code> 配置</li>
                                            <li>或者设置环境变量 <code>DEEPSEEK_API_KEY</code></li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                                        网络连接问题
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>如果测试显示网络连接错误：</p>
                                        <ol>
                                            <li>检查网络连接是否正常</li>
                                            <li>确认防火墙没有阻止对 <code>api.deepseek.com</code> 的访问</li>
                                            <li>如果使用代理，请配置相应的代理设置</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                                        API配额问题
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>如果测试显示API配额不足：</p>
                                        <ol>
                                            <li>登录DeepSeek平台检查账户余额</li>
                                            <li>确认API密钥有足够的调用次数</li>
                                            <li>考虑升级账户或购买更多配额</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('testBtn').addEventListener('click', function() {
    const btn = this;
    const resultDiv = document.getElementById('testResult');
    const resultContent = document.getElementById('resultContent');
    
    btn.disabled = true;
    btn.textContent = '测试中...';
    
    fetch('/api/test/ai')
        .then(response => response.json())
        .then(data => {
            resultDiv.style.display = 'block';
            
            let html = '<div class="card">';
            html += '<div class="card-body">';
            
            // 配置信息
            html += '<h6>配置信息：</h6>';
            html += '<ul>';
            html += '<li>API URL: ' + data.apiUrl + '</li>';
            html += '<li>API密钥已配置: ' + (data.apiKeyConfigured ? '是' : '否') + '</li>';
            html += '<li>API密钥前缀: ' + data.apiKeyPrefix + '</li>';
            html += '</ul>';
            
            // 测试结果
            html += '<h6>测试结果：</h6>';
            if (data.success) {
                html += '<div class="alert alert-success">';
                html += '<strong>测试成功！</strong><br>';
                html += '测试提示: ' + data.testPrompt + '<br>';
                html += 'AI回复: ' + data.aiResponse;
                html += '</div>';
            } else {
                html += '<div class="alert alert-danger">';
                html += '<strong>测试失败！</strong><br>';
                html += '错误类型: ' + data.errorType + '<br>';
                html += '错误信息: ' + data.error;
                html += '</div>';
            }
            
            html += '</div></div>';
            resultContent.innerHTML = html;
        })
        .catch(error => {
            resultDiv.style.display = 'block';
            resultContent.innerHTML = '<div class="alert alert-danger">网络错误: ' + error.message + '</div>';
        })
        .finally(() => {
            btn.disabled = false;
            btn.textContent = '测试AI服务';
        });
});
</script>
</body>
</html>
